<html style="height: 100%;" lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<title>Atelier Final Projects Kick-Off</title>

		<meta name="description" content="Kick-Off of the atelier final projects">
		<meta name="author" content="Cesare Pautasso">

<!----------------------- Include aloha editor and our modifications ------------------------>
		<!--
		Load the CSS styles for Aloha Editor
		-->
		<link rel="stylesheet" href="css/aloha.css" type="text/css">
		<script src="js/aloha-config.js"></script>
		<script src="lib/require.js"></script>
		<script src="lib/vendor/jquery-1.7.2.js"></script>
		<script>
			// Passing jQuery into Aloha explicitly is not necessary since
			// newer versions of jQuery will make a call to define which will
			// be picked up in aloha.js
			//Aloha.settings.jQuery = $.noConflict(true);
		</script>
		<!--
		Load the Aloha Editor library.
		The plugin list could also be added to the configuration.
		-->
		<!-- Don't commit the sourceview plugin to the list of enabled plugins! -->
		<script src="lib/aloha.js"
		data-aloha-plugins="common/ui,
		common/format,
		common/table,
		common/list,
		common/link,
		common/highlighteditables,
		common/undo,
		common/contenthandler,
		common/paste,
		common/characterpicker,
		common/commands,
		common/block,
		common/image,
		common/abbr,
		common/horizontalruler,
		common/align,
		common/dom-to-xhtml,
		extra/formatlesspaste,
		extra/toc,
		extra/headerids,
		extra/listenforcer,
		extra/metaview,
		extra/numerated-headers,
		extra/ribbon,
		extra/wai-lang,
		extra/flag-icons,
		extra/linkbrowser,
		extra/imagebrowser,
		extra/cite"></script>

		<!-- Include the fake-jquery to make sure that Aloha works even if
		the user includes his own global jQuery after aloha.js. -->
		<script src="js/fake-jquery.js"></script>
		<!--<script src="ribbon-example.js"></script>--
		<link rel="stylesheet" href="css/styleForAloha.js">-->
		<script src="js/aloha-boilerplate.js"></script>
		
<!----------------------- End of include aloha editor and our modifications ------------------------>

		<link href="css/default.css" rel="stylesheet">
		<link href="css/builder.css" rel="stylesheet">
		<link href="css/sunburst.css" rel="stylesheet">
		<link href="css/style.css" rel="stylesheet">
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
		
		<link rel="shortcut icon" href="favicon.png">
		<link rel="apple-touch-icon" href="apple-touch-icon.png">

		<script src="js/jquery.1.7.1.min.js"></script>
		<script src="js/img-svg.js"></script>
		<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
	</head>

	<body>
		<div class="fallback-message">
			<p>
				Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.
			</p>
			<p>
				For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.
			</p>
		</div>

		<div id="impress" data-transition-duration="1000">
			<div>
				<div>
					<div>

						<div id="title" class="step " data-x="0" data-y="0" data-scale="1" data-rotate="0">
							<!--<img src="img/logo_info_color_en.svg">-->	
							<div class="fakeClassNameForAloha">
								<h1>Slide&Impress</h1>
								<br/>
								<p style="text-align: center">A WYSIWYG editor for Impress.js</p>
								<br />
							</div>
						</div>
					

						<div id="cal" class="step " data-x="500" data-y="0" data-z="-500" data-scale="1" data-rotate="0" data-rotate-y="90">
							<div class="fakeClassNameForAloha">
								<h1>Edit</h1>
								<ul>
									<li>Toggle between presentation and edit mode.</li>
									<li>Toolbar for editing.</li>
									<li>Wrap button for easy editing.</li>
								</ul>
							</div>
						</div>

						<div id="prj"  class="step " data-x="0" data-y="0" data-scale="0.5" data-rotate="0" data-z="-1000" data-scale="1" data-rotate="0" data-rotate-y="180">
							<div class="fakeClassNameForAloha">
								<h1 style="line-height: 100px">Transformations</h1>
								<ul style="line-height: 100px">
									<li>Buttons appended to the slide.</li>
									<li>3D transitions added.</li>
									<li>Input text for setting the transformations.</li>
								</ul>
							</div>
						</div>

						<div id="prj-wt" class="step flash" data-x="-500" data-y="0" data-z="-500" data-scale="1" data-rotate="0" data-rotate-y="270">
							<div class="fakeClassNameForAloha">
								<h1>Others</h1>
								<br />
								<ul>
									<li>Slideshow for automatic presentation.</li>
									
									<li>Debug of builder.js.</li>
								</ul>
							</div>
						</div>
						<div id="ss1" class="step flash" data-x="500" data-y="500" data-z="-500" data-scale="1" data-rotate="0" data-rotate-x="90">
							<div class="fakeClassNameForAloha">
								<h1>Libraries</h1>
								<ul>
									<li>Builder.js(Extended).</li>
									<li>FileSaver.js.</li>
									<li>Aloha Editor(Extended).</li>
								</ul>
							</div>
						</div>
						<div id="ss2" class="step flash" data-x="-1500" data-y="0" data-z="-500" data-scale="1" data-rotate="0" data-rotate-y="180">
							<div class="fakeClassNameForAloha">
								<h1>Features To Be Added</h1>
								<ul>
									<li>Save functionality.</li>
									<li>Bar with all the slides.</li>
									<li>Color picker.</li>
									<li>New file.</li>
									<li>Swap/Delete slides</li>
									<li>Zoom</li>
								</ul>
							</div>
						</div>
						

						<div id="overview" class="step" data-x="1000" data-y="-1000" data-scale="5" data-rotate="0"></div>

						<div class="hint">
							<p>
								Use a spacebar or arrow keys to navigate
							</p>
						</div>
						
						<script src="js/attachEditor.js"></script>

						<script src="js/highlight.pack.js"></script>
						<script src="js/impress.js"></script>
						<script src="js/builder.js"></script>
						<script src="js/FileSaver.js"></script>
						<script src="js/main.js"></script>
						
						
						
			
					</div>
				</div>
			</div>
		</div>
		<script>
			$( ".builder-controls" ).draggable({ cursor: "move" }, { containment: "parent" });
		</script>
	</body>
</html>